<template>
  <el-dialog title="服务器详情" :model-value="visible" width="800px" append-to-body @close="handleClose">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="服务器ID">{{ detailData.serverId }}</el-descriptions-item>
      <el-descriptions-item label="服务器名称">{{ detailData.serverName }}</el-descriptions-item>
      <el-descriptions-item label="服务器IP">{{ detailData.serverIp }}</el-descriptions-item>
      <el-descriptions-item label="端口">{{ detailData.port }}</el-descriptions-item>
      <el-descriptions-item label="服务器类型">
        <el-tag :type="getServerTypeTag(detailData.serverType)">{{ detailData.serverType }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="运行状态">
        <el-tag :type="getStatusTag(detailData.status)">{{ getStatusText(detailData.status) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="CPU使用率">
        <el-progress :percentage="detailData.cpuUsage" :color="getProgressColor(detailData.cpuUsage)" />
      </el-descriptions-item>
      <el-descriptions-item label="内存使用率">
        <el-progress :percentage="detailData.memoryUsage" :color="getProgressColor(detailData.memoryUsage)" />
      </el-descriptions-item>
      <el-descriptions-item label="磁盘使用率">
        <el-progress :percentage="detailData.diskUsage" :color="getProgressColor(detailData.diskUsage)" />
      </el-descriptions-item>
      <el-descriptions-item label="最后心跳时间">{{ detailData.lastHeartbeat }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="服务器描述" :span="2">{{ detailData.description }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup name="ServerDetailDialog" lang="ts">
// Props
interface Props {
  visible: boolean
  detailData: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  detailData: () => ({})
})

// Emits
const emit = defineEmits(['update:visible'])

// 获取服务器类型标签样式
const getServerTypeTag = (type: string) => {
  switch (type) {
    case 'IOT核心服务': return 'primary'
    case '数据处理服务': return 'success'
    case '消息队列服务': return 'warning'
    case '存储服务': return 'info'
    default: return 'primary'
  }
}

// 获取状态标签样式
const getStatusTag = (status: string) => {
  switch (status) {
    case '1': return 'success'
    case '0': return 'danger'
    case '2': return 'warning'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case '1': return '运行中'
    case '0': return '已停止'
    case '2': return '异常'
    default: return '未知'
  }
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67C23A'
  if (percentage < 80) return '#E6A23C'
  return '#F56C6C'
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
/* 组件样式 */
</style>